<template>
  <div class="record-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <!-- 合同退租日志tab -->
      <el-tab-pane label="合同退租日志" name="cancellation">
        <el-card class="filter-card">
          <el-form :inline="true" :model="cancellationQueryParams" class="filter-form">
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model="cancellationQueryParams.companyName"
                placeholder="请输入企业名称"
                clearable
                style="width: 220px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="list-card" style="margin-top: 18px">
          <el-table
            v-loading="loading"
            :data="cancellationList"
            style="width: 100%"
            border
          >
            <el-table-column prop="id" label="Id" width="80" sortable align="left" />
            <el-table-column prop="createTime" label="变更时间" width="180" sortable align="left" />
            <el-table-column prop="contractNumber" label="合同编号" width="320" align="left" />
            <el-table-column prop="companyName" label="企业名称" width="300" align="left" />
            <el-table-column prop="cancellationBy" label="操作人员" width="120" align="left" />
            <el-table-column prop="cancellationer" label="退租方" width="120" align="left" />
            <el-table-column prop="cancellationReason" label="退租原因" width="200" align="left" />
            <el-table-column prop="operator" label="经办人" width="120" align="left" />
            <el-table-column prop="cancellationRemake" label="备注" align="left" />
          </el-table>
          <pagination
            v-show="cancellationTotal > 0"
            :total="cancellationTotal"
            v-model:page="cancellationQueryParams.pageNum"
            v-model:limit="cancellationQueryParams.pageSize"
            @pagination="getCancellationList"
          />
        </el-card>
      </el-tab-pane>

      <!-- 合同变更日志tab -->
      <el-tab-pane label="合同变更日志" name="changeLog">
        <el-card class="filter-card">
          <el-form :inline="true" :model="changeLogQueryParams" class="filter-form">
            <el-form-item label="企业名称">
              <el-input
                v-model="changeLogQueryParams.companyName"
                placeholder="请输入企业名称"
                clearable
                style="width: 220px"
                @keyup.enter="handleChangeLogQuery"
              />
            </el-form-item>
            <el-form-item label="变更类型">
              <el-select
                v-model="changeLogQueryParams.type"
                placeholder="请选择变更类型"
                clearable
                style="width: 120px"
              >
                <el-option label="扩租" value="2" />
                <el-option label="缩租" value="3" />
                <el-option label="续租" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否重新办证">
              <el-select
                v-model="changeLogQueryParams.isRehandleCertificate"
                placeholder="请选择"
                clearable
                style="width: 120px"
              >
                <el-option label="否" value="0" />
                <el-option label="是" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否退用原合同">
              <el-select
                v-model="changeLogQueryParams.isAbandonOriginalContract"
                placeholder="请选择"
                clearable
                style="width: 120px"
              >
                <el-option label="否" value="0" />
                <el-option label="是" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleChangeLogQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="resetChangeLogQuery">重置</el-button>
            </el-form-item>
          </el-form></el-card
        >
        <el-card class="list-card" style="margin-top: 18px">
          <el-table
            v-loading="changeLogLoading"
            :data="changeLogList"
            style="width: 100%"
            border
          >
            <el-table-column label="序号" width="80" type="index" align="left" />
            <el-table-column prop="companyName" label="企业名称" width="260" sortable align="left" />
            <el-table-column prop="contractNumber" label="合同编号" width="320" align="left" />
            <el-table-column prop="type" label="变更类型" width="100" align="left">
              <template #default="scope">
                <el-tag v-if="scope.row.type === 2">扩租</el-tag>
                <el-tag v-else-if="scope.row.type === 3" type="warning">缩租</el-tag>
                <el-tag v-else-if="scope.row.type === 4" type="success">续租</el-tag>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="isRehandleCertificate" label="重新办证" width="100" align="left">
              <template #default="scope">
                <el-tag v-if="scope.row.isRehandleCertificate === 1" type="success"
                  >是</el-tag
                >
                <el-tag v-else type="info">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="isAbandonOriginalContract"
              label="退用原合同"
              width="120"
              align="left"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.isAbandonOriginalContract === 1" type="success"
                  >是</el-tag
                >
                <el-tag v-else type="info">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="经办人" width="120" align="left" />
            <el-table-column prop="remake" label="备注" fixed="right" align="left" />
          </el-table>
          <pagination
            v-show="changeLogTotal > 0"
            :total="changeLogTotal"
            v-model:page="changeLogQueryParams.pageNum"
            v-model:limit="changeLogQueryParams.pageSize"
            @pagination="getChangeLogList"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { cancellation_infoList, getChangeLog } from "@/api/company/info";
const { proxy } = getCurrentInstance();

// Tab控制
const activeTab = ref("cancellation");

// 合同退租日志相关数据
const loading = ref(false);
const cancellationTotal = ref(0);
const cancellationList = ref([]);

const cancellationQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  companyName: "",
  cancellationBy: "",
  // companyId: route.query.companyId || "",
});

// 合同变更日志相关数据
const changeLogLoading = ref(false);
const changeLogTotal = ref(0);
const changeLogList = ref([]);

const changeLogQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  companyName: "",
  type: "", // 2扩租，3缩租，4续租
  isRehandleCertificate: "", // 0否1是
  isAbandonOriginalContract: "", // 0否1是
  companyId: proxy.$route.query.companyId || "",
});

// 获取合同退租日志列表
function getCancellationList() {
  loading.value = true;
  cancellation_infoList(cancellationQueryParams)
    .then((res) => {
      if (res && res.code === 200) {
        cancellationList.value = res.rows || [];
        cancellationTotal.value = res.total || 0;
      } else {
        cancellationList.value = [];
        cancellationTotal.value = 0;
      }
    })
    .catch(() => {
      cancellationList.value = [];
      cancellationTotal.value = 0;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 获取合同变更日志列表
function getChangeLogList() {
  changeLogLoading.value = true;
  getChangeLog(changeLogQueryParams)
    .then((res) => {
      if (res && res.code === 200) {
        changeLogList.value = res.rows || [];
        changeLogTotal.value = res.total || 0;
      } else {
        changeLogList.value = [];
        changeLogTotal.value = 0;
      }
    })
    .catch(() => {
      changeLogList.value = [];
      changeLogTotal.value = 0;
    })
    .finally(() => {
      changeLogLoading.value = false;
    });
}

// 处理Tab切换
function handleTabChange(tabName) {
  if (tabName === "cancellation") {
    if (cancellationList.value.length === 0) {
      getCancellationList();
    }
  } else if (tabName === "changeLog") {
    if (changeLogList.value.length === 0) {
      getChangeLogList();
    }
  }
}

// 合同退租日志搜索
function handleQuery() {
  cancellationQueryParams.pageNum = 1;
  getCancellationList();
}

// 重置合同退租日志搜索条件
function resetQuery() {
  cancellationQueryParams.companyName = "";
  cancellationQueryParams.cancellationBy = "";
  cancellationQueryParams.pageNum = 1;
  getCancellationList();
}

// 合同变更日志搜索
function handleChangeLogQuery() {
  changeLogQueryParams.pageNum = 1;
  getChangeLogList();
}

// 重置合同变更日志搜索条件
function resetChangeLogQuery() {
  changeLogQueryParams.companyName = "";
  changeLogQueryParams.type = "";
  changeLogQueryParams.isRehandleCertificate = "";
  changeLogQueryParams.isAbandonOriginalContract = "";
  changeLogQueryParams.pageNum = 1;
  getChangeLogList();
}

onMounted(() => {
  getCancellationList();
});
</script>

<style scoped>
.record-container {
  padding: 24px 32px 0 32px;
  min-height: 100vh;
}

.filter-card {
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
}

.filter-form {
  padding: 8px 0 0 0;
}

.list-card {
  margin-bottom: 18px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
}

.el-table {
  border-radius: 8px;
  font-size: 15px;
}

.el-table th {
  color: #333;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
}

.el-table td {
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}

.el-button[type="primary"] {
  background: linear-gradient(90deg, #4f8cff 0%, #38c8fa 100%);
  border: none;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(32, 159, 240, 0.08);
  transition: background 0.2s;
}

.el-button[type="primary"]:hover {
  background: linear-gradient(90deg, #2563eb 0%, #38c8fa 100%);
}
</style>
